<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="title" style="margin-left: -230px;font-size: 20px">用户登陆</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="100px"
      >
        <el-form-item prop="username" style="margin-left: -100px;margin-bottom: 30px">
          <el-input v-model="loginForm.username" placeholder="用户名">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" style="margin-left: -100px;margin-bottom: 20px">
          <el-input type="password" v-model="loginForm.password" placeholder="登陆密码"></el-input>
        </el-form-item>
        <el-form-item prop="code" style="margin-left: -100px;margin-bottom: 30px">
          <el-input type="code" v-model="loginForm.code" placeholder="验证码"style="width: auto;margin-left: -3px;margin-right: 12px">
          </el-input>
          <img src="../assets/code.png" style="position: relative;top: 15px">
        </el-form-item>
        <el-button class="login-button" type="primary" @click="login" style="margin-bottom: 30px">登录</el-button>
      </el-form>
      <p>(体验账号：test123456，密码：123456)</p>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        code:''
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    login() {
      // 进行登录操作
      let lowercaseString = this.loginForm.code.toLowerCase();
      if (this.loginForm.username!="test123456"){
        this.$message.error('用户名错误');
      }else if (this.loginForm.password!="123456"){
        this.$message.error('密码错误');
      }else if (lowercaseString!="ybyg"){
        this.$message.error('验证码错误');
      }else {
        this.$router.push("/home/index")
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  margin-top: 90px;
  margin-left: 700px;
  width: 400px;
  height: 420px;

}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.login-button {
  width: 100%;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../assets/img.png');
  background-size: cover;

  /*background-image: url('your-background-image.jpg');*/
}

.login-card {
  width: 360px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #fff;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
  animation: fade-in 1.5s ease-in forwards;
}


.el-form-item.is-error .el-input__inner {
  border-color: #f56c6c;
}

.el-form-item.is-error .el-form-item__error {
  color: #f56c6c;
}
</style>